<template>
  <div class="search-result">
    <h2 class="title">
      搜索结果（{{ result.total }}）
    </h2>
    <div class="list">
      <Scroll
        v-if="result.type==='song'"
        height="800"
        :on-reach-bottom="handleSearch"
      >
        <router-link
          v-for="item in result.data"
          :key="`${result.type}-${item.id}`"
          :to="{ name: 'LibrarySong', params: { songId: item.id } }"
        >
          <ResCard
            :type="result.type"
            :title="item.title"
            :img="item.belongsToAlbum.coverImage"
          >
            <div
              slot="sub-title"
              class="sub-title"
            >
              <router-link
                v-for="artist in item.belongsToArtists"
                :key="'artist-' + artist.id"
                :to="{ name: 'LibraryArtist', params: { artistId: artist.id } }"
              >
                {{ artist.name }}
              </router-link>
            </div>
          </ResCard>
        </router-link>
      </Scroll>
      <Scroll
        v-if="result.type==='album'"
        height="800"
        :on-reach-bottom="handleSearch"
      >
        <router-link
          v-for="item in result.data"
          :key="`${result.type}-${item.id}`"
          :to="{ name: 'LibraryAlbum', params: { albumId: item.id } }"
        >
          <ResCard
            :type="result.type"
            :img="fullUrl(item.coverImage)"
            :title="item.title"
          >
            <div
              slot="sub-title"
              class="sub-title"
            >
              <router-link
                v-for="artist in item.belongsToArtists"
                :key="'artist-' + artist.id"
                :to="{ name: 'LibraryArtist', params: { artistId: artist.id } }"
              >
                {{ artist.name }}
              </router-link>
            </div>
          </ResCard>
        </router-link>
      </Scroll>
      <Scroll
        v-if="result.type==='artist'"
        height="800"
        :on-reach-bottom="handleSearch"
      >
        <router-link
          v-for="item in result.data"
          :key="`${result.type}-${item.id}`"
          :to="{ name: 'LibraryArtist', params: { songId: item.id } }"
        >
          <ResCard
            :type="result.type"
            :img="fullUrl(item.images[0])"
            :title="item.name"
          />
        </router-link>
      </Scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Model } from 'vue-property-decorator'
import { search, defaultSearchResult } from '@/api'
import { cdn } from '@/utils'
import ResCard from '../components/ResCard.vue'

@Component({
  name: 'SearchResult',
  components: {
    ResCard
  }
})
export default class extends Vue {
  @Model('reset-refresh', { type: Boolean }) readonly refresh!: boolean;
  @Prop() search!: string;
  @Prop() type!: 'artist' | 'album' | 'song';
  @Prop({ default: 0 }) page!: number;
  private result = defaultSearchResult;

  private fullUrl (path: string) {
    return cdn(path)
  }

  // @Watch('search')
  // private handleSearchKeyUpdated (key: string) {
  //   if (!key || key === '') return
  //   this.page = 0
  //   this.result.data = []
  //   this.handleSearch()
  // }

  // @Watch('type')
  // private handleSearchTypeUpdated () {
  //   if (this.search === '') return
  //   this.page = 0
  //   this.result.data = []
  //   this.handleSearch()
  // }

  @Watch('refresh')
  private handleRefresh (active: boolean) {
    if (!active) return
    if (!this.search || this.search === '') {
      this.$Message.warning('请输入搜索内容')
      this.$emit('reset-refresh', false)
      this.$emit('on-refreshed', false)
      return
    }
    this.page = 0
    this.result.data = []
    this.handleSearch()
      .then(() => {
        this.$emit('on-refreshed', true)
      })
      .finally(() => {
        this.$emit('reset-refresh', false)
      })
  }

  private async handleSearch () {
    this.$Loading.start()
    return search(this.search, this.type, this.page + 1)
      .then(res => {
        const { data } = res
        this.result.data = this.result.data.concat(data.data)
        this.result.count = data.count
        this.result.total = data.total
        this.result.page = data.page
        this.result.pageCount = data.pageCount
        this.result.type = data.type
        if (data.page > data.pageCount) {
          this.$Message.info('没有更多结果了')
        } else {
          this.page += 1
        }
      })
      .catch(err => {
        this.$Message.error('搜索结果加载失败，请稍后再试')
        this.$emit('on-error', err)
      })
      .finally(() => {
        this.$Loading.finish()
      })
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

.title {
  &::before {
    content: "";
    display: inline-block;
    background: white;
    width: 3px;
    height: 1em;
    position: relative;
    bottom: -3px;
    left: -3px;
  }
}

.list/deep/.ivu-scroll-content {
  column-count: 3;
  column-gap: 0;
  @media (min-width: 1350px) {
    column-count: 4;
  }
  @media (min-width: 1600px) {
    column-count: 5;
  }
  & > a {
    display: block;
    break-inside: avoid;
    box-sizing: border-box;
    margin: 0 16px 16px 16px;
    .res-card {
      break-inside: avoid;
      max-width: 220px;
      border-radius: 8px;
      overflow: hidden;
    }
    &:hover {
      box-shadow: 6px 6px 6px #202020;
    }
  }
}
</style>
